<template>
  <div class="main">
    <p class="main_text">客户管理</p>
    <!-- 搜索 -->
    <div class="g-search" ref="searchBox">
      <!-- 时间选择区域 -->
      <span class="demonstration">注册时间：</span>
      <el-date-picker
        v-model="searchValue.startTime"
        type="date"
        placeholder="开始时间"
        @change="startTime"
        :clearable="false"
        :default-time="defaultTime(0, 0, 0)" />
      <span class="demonstration" style="display: inline-block; font-size: 12px; color: #898989; margin: 20px">至</span>
      <el-date-picker
        v-model="searchValue.endTime"
        type="date"
        placeholder="结束时间"
        @change="endTime"
        :clearable="false"
        :default-time="defaultTime1(23, 59, 59)" />
      &emsp;
      <el-radio-group v-model="radio" class="ml-4" @change="radioSelect">
        <el-radio label="1" size="large">今天</el-radio>
        <el-radio label="2" size="large">近7天</el-radio>
        <el-radio label="3" size="large">近30天</el-radio>
        <el-radio label="4" size="large">近3个月</el-radio>
      </el-radio-group>

      <!-- 信息区域 -->
      <div class="all_select">
        <!-- 订单编号 -->
        <div class="input_valye">
          <span class="demonstration">用户账号</span>
          <input
            type="text"
            class="input"
            placeholder="请输入用户账号"
            v-model="searchValue.account"
            @keyup.enter="search" />
        </div>
        <!-- 订单编号 -->
        <div class="input_valye">
          <span class="demonstration">用户名称</span>
          <input
            type="text"
            class="input"
            placeholder="请输入用户名称"
            v-model="searchValue.userName"
            @keyup.enter="search" />
        </div>
        <!-- 订单状态 -->
        <div class="input_valye">
          <span class="demonstration">用户等级</span
          ><el-select v-model="searchValue.level" class="m-2" placeholder="请选择用户等级" @change="search">
            <el-option v-for="item in rate_options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <!-- 订单状态 -->
        <div class="input_valye">
          <span class="demonstration">用户状态</span
          ><el-select v-model="searchValue.status" class="m-2" placeholder="请选择用户状态" @change="search">
            <el-option v-for="item in status_options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
      </div>
      <!-- 底部按钮区域 -->
      <div class="bottom_btn">
        <el-button class="solid" @click="search">查询</el-button>
        <el-button class="hollow" @click="reset">重置</el-button>
      </div>
    </div>
    <!-- 表格 -->
    <div class="cyr-flex">
      <!-- 表格按钮区域 -->
      <div class="mb20">
        <el-tooltip class="box-item" effect="dark" content="操作当前页所有数据" placement="top-start">
          <el-button class="hollow" @click="massTexting">群发信息</el-button>
        </el-tooltip>
        <el-button type="danger" plain>批量删除</el-button>
      </div>
      <div class="cyr-flex-box">
        <!-- 表格区域 -->
        <el-table
          :data="tableData"
          @selection-change="handleSelectionChange"
          :header-cell-style="{'text-align': 'center'}"
          :show-overflow-tooltip="true"
          v-adaptive
          border>
          <el-table-column type="selection" width="40" />
          <el-table-column prop="phone" label="用户账号" align="center" width="120" />
          <el-table-column prop="username" label="用户名" align="center">
            <template #default="item">
              <el-text tag="span" style="cursor: pointer" @click="lookUser(item.row)">{{ item.row.username }}</el-text>
            </template>
          </el-table-column>
          <el-table-column prop="vipRate" label="会员等级" align="center">
            <template #default="item">
              <el-text v-if="item.row.vipRate == 0" class="mx-1" type="success">青铜</el-text>
              <el-text v-if="item.row.vipRate == 1" class="mx-1" type="default">白银</el-text>
              <el-text v-if="item.row.vipRate == 2" class="mx-1" type="warning">黄金</el-text>
              <el-text v-if="item.row.vipRate == 3" class="mx-1" type="primary">钻石</el-text>
            </template>
          </el-table-column>
          <el-table-column prop="integral" label="用户积分" align="center" />
          <el-table-column prop="registerAt" label="注册时间" align="center" width="180" />
          <el-table-column prop="status" label="用户状态" align="center">
            <template #default="item">
              <el-text v-if="item.row.status == 1" class="mx-1" type="success">活跃</el-text>
              <el-text v-if="item.row.status == 2" class="mx-1" type="primary">注销</el-text>
              <el-text v-if="item.row.status == 3" class="mx-1" type="warning">冻结</el-text>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200" class="operation" :show-overflow-tooltip="false">
            <template #default="item">
              <div class="table_btn">
                <el-button size="small" class="none" @click="lookUser(item.row)">查看</el-button
                ><el-button size="small" class="none" @click="blockedUser(item.row)" v-show="item.row.vipRate != 3"
                  >冻结</el-button
                ><el-button size="small" class="none" @click="unfreezeUser(item.row)" v-show="item.row.vipRate == 3"
                  >解冻</el-button
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <smartPager
          v-model:current-page="searchValue.page"
          v-model:page-size="searchValue.rows"
          :total="total"
          @change="pageChange" />
      </div>
    </div>
    <!-- 群发信息 -->
    <div class="messages" v-if="messagesShow">
      <div class="title1">
        <div class="title_mes">
          <el-icon size="20" color="#fff"> <Edit /> </el-icon>&nbsp;群发消息
        </div>
        <span class="close" @click="maskBtn1">✖</span>
      </div>
      <div class="content1" style="margin-top: 40px">
        <el-form ref="ruleFormRef" :model="sendMes" label-width="90px" label-position="right" :rules="rules">
          <el-form-item label="推送类型:" prop="type">
            <el-select v-model="sendMes.type" class="m-2" placeholder="请选择推送类型" @change="typeChange">
              <el-option v-for="item in type_options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
            <span id="input_hint"></span>
          </el-form-item>
          <el-form-item label="消息模板:" prop="templateId">
            <el-select v-model="sendMes.templateId" class="m-2" placeholder="请选择消息模板" @change="typeChange1">
              <el-option v-for="item in template_options" :key="item.title" :label="item.title" :value="item.id">
              </el-option>
            </el-select>
            <span id="input_hint"></span>
          </el-form-item>
          <el-form-item label="消息标题:" prop="title">
            <el-input
              v-model="sendMes.title"
              class="form_input"
              maxlength="50"
              type="textarea"
              show-word-limit></el-input>
            <span id="input_hint"></span>
          </el-form-item>
          <el-form-item label="短信内容:" prop="content">
            <el-input
              v-model="sendMes.content"
              cols="30"
              rows="4"
              class="form_input"
              maxlength="300"
              type="textarea"
              show-word-limit></el-input>
            <span id="input_hint"></span>
          </el-form-item>
        </el-form>
        <div style="display: flex; align-items: center; font-size: 14px; color: #3d3d3d">
          <el-icon color="#116CF8" size="18"> <Warning /> </el-icon
          >&nbsp;发送时系统会自动在结尾追加平台名称，请勿重复添加
        </div>
        <div class="btn_center">
          <el-button class="hollow" @click="maskBtn1">取消</el-button>
          <el-button class="solid" @click="plateformSure(ruleFormRef)" :loading="loading">确定</el-button>
        </div>
      </div>
    </div>
    <!-- 查看订单 -->
    <el-drawer v-model="orderShow" class="order" style="position: absolute !important; z-index: 40 !important">
      <div class="title">
        <div class="head_img"></div>
        <div class="user_mes_top">
          <p class="user_top_name p_text">{{ user.username }}</p>
          <p class="p_text">用户账号:{{ user.phone }}</p>
          <p class="p_text">
            用户状态:<span style="color: #1ac78a; display: flex; align-items: center"
              ><span
                style="font-size: 30px; display: inline-block; margin-top: -5px; margin-left: 10px; margin-right: 3px"
                >·</span
              >活跃</span
            >
          </p>
        </div>
        <div class="title_right">
          <el-icon color="#409EFF" size="14px"> <User /> </el-icon>冻结账户
        </div>
      </div>
      <!-- 导航 -->
      <div class="nav1">
        <li class="nav_li current" @click="navLi(0)" id="nav_li1">店铺平台信息</li>
        <li class="nav_li" @click="navLi(1)" id="nav_li2">主体资质信息</li>
      </div>
      <!-- 基本信息 -->
      <div class="essential_information" v-show="essential">
        <div class="center">
          <div class="list">
            <span class="left"><img class="img_b" src="@/assets/images/shop/goods/Edit-name.png" alt="" />用户名</span
            >{{ user.username }}
          </div>
          <div class="list">
            <span class="left"><img class="img_b" src="@/assets/images/shop/goods/Frame43.png" alt="" />用户账号</span
            >{{ user.phone }}
          </div>
          <div class="list">
            <span class="left"
              ><img class="img_b" src="@/assets/images/shop/goods/Every-user.png" alt="" />用户状态</span
            >
            <span v-if="user.status == 1">活跃</span>
            <span v-if="user.status == 0">冻结</span>
          </div>
          <div class="list">
            <span class="left"><img class="img_b" src="@/assets/images/shop/goods/Level.png" alt="" />用户等级</span>
            <span v-if="user.vipRate == 0">青铜</span>
            <span v-else-if="user.vipRate == 1">白银</span>
            <span v-else-if="user.vipRate == 2">黄金</span>
            <span v-else>钻石</span>
          </div>
          <div class="list">
            <span class="left"><img class="img_b" src="@/assets/images/shop/goods/Frame59.png" alt="" />积分</span
            >{{ user.integral }}
          </div>
          <div class="list">
            <span class="left"
              ><img class="img_b" src="@/assets/images/shop/goods/Phone-telephone.png" alt="" />联系方式</span
            >{{ user.phone }}
          </div>
          <div class="list">
            <span class="left"
              ><img class="img_b" src="@/assets/images/shop/goods/Calendar-thirty.png" alt="" />注册时间</span
            >{{ user.registerAt }}
          </div>
        </div>
        <div class="titlt_title">
          <div class="box"></div>
          账户资产
        </div>
        <el-table :data="preferentialInfo" style="width: 100%" :header-cell-style="{background: '#F5F7FA !important'}">
          <el-table-column prop="jifen" label="累计积分" width="180" />
          <el-table-column prop="allCount" label="优惠卷数量" width="180" />
          <el-table-column prop="usedCount" label="已用优惠卷" />
          <el-table-column prop="expireCount" label="过期优惠卷" />
          <el-table-column prop="validCount" label="未用优惠卷" />
        </el-table>
      </div>
      <!-- 明细统计 -->
      <div class="essential_information" v-show="detailed">
        <div class="titlt_title">
          <div class="box"></div>
          分销统计
        </div>
        <el-table
          :data="distribution"
          style="width: 100%"
          height="200px"
          :header-cell-style="{
            background: '#F5F7FA !important',
            'text-align': 'center',
          }">
          <el-table-column prop="jifen" label="分销员账号" width="100" align="center" />
          <el-table-column prop="anm" label="等级" width="80" align="center" />
          <el-table-column prop="anm1" label="所属上级" align="center" />
          <el-table-column prop="anm2" label="有效客户数" width="100" align="center" />
          <el-table-column prop="anm3" label="佣金来源" align="center" />
          <el-table-column prop="anm3" label="一级佣金" align="center" />
          <el-table-column prop="anm3" label="二级佣金" align="center" />
          <el-table-column prop="anm3" label="时间" align="center" />
          <el-table-column prop="anm3" label="备注" align="center" />
        </el-table>
        <div class="titlt_title">
          <div class="box"></div>
          账户明细
        </div>
        <div style="margin-bottom: 20px">
          <el-button class="solid" @click="transaction(item.row)" style="border-radius: 30px">交易明细</el-button>
          <el-button class="forbidden" @click="integral(item.row)" style="border-radius: 30px">积分明细</el-button>
        </div>
        <el-table
          :data="orderInfo"
          style="width: 100%"
          height="200px"
          :header-cell-style="{background: '#F5F7FA !important'}">
          <el-table-column prop="orderSn" label="订单编号" width="180" align="center" />
          <el-table-column prop="createdAt" label="注册时间" width="180" align="center" />
          <el-table-column prop="price" label="订单金额" align="center" />
          <el-table-column prop="payMethod" label="支付方式" align="center" />
          <el-table-column prop="status" label="订单状态" align="center" />
        </el-table>
      </div>
    </el-drawer>
    <!-- 遮罩层 -->
    <div id="mask1" v-if="mask" @click="maskBtn1"></div>
  </div>
</template>
<script setup lang="ts">
import {ref, onMounted, reactive, onBeforeUnmount} from 'vue';
import {RequestPlatformUser, LookUserMes, RequesttemplateIds, SendMesToUser} from '@/api/path/index.js';
import moment from 'moment';
import {ElMessage} from 'element-plus';
import type {FormInstance} from 'element-plus';
import {Warning, Edit, User} from '@element-plus/icons-vue';
const defaultTime = (H: any, M: any, S: any) => {
  var now = new Date();
  now.setHours(H);
  now.setMinutes(M);
  now.setSeconds(S);
  return now;
};
const defaultTime1 = (H: any, M: any, S: any) => {
  var now = new Date();
  now.setHours(H);
  now.setMinutes(M);
  now.setSeconds(S);
  return now;
};
const ruleFormRef = ref<FormInstance>();
const distribution = ref([
  {
    jifen: 200,
    anm: '10',
    anm1: '2',
    anm2: '3',
    anm3: '5',
  },
]);
// 推送消息数据
const GoodsformDate = ref({
  type: '',
  link: '',
});
// 表单规则
const rules = reactive({
  type: [{required: true, message: '请输入文章标题', trigger: 'blur'}],
  // unit: [{ required: true, message: '请选择商品单位', trigger: 'change' }],
  templateId: [{required: true, message: '请选择商品分类', trigger: 'blur'}],
  title: [{required: true, message: '请输入消息标题', trigger: 'blur'}],
  content: [{required: true, message: '请选择商品分类', trigger: 'blur'}],
});
const tableData = ref<any>([]); // 表格列表
const total = ref(0); //表格总数
const mask = ref(false); //控制遮罩层显示
const orderShow = ref(false); //控制查看订单显示
const plateformShow = ref(false); //控制推送信息显示
const messagesShow = ref(false); //控制群发显示
const order = ref<any>([]); //订单数组
const radio = ref('');
interface RestaurantItem {
  value: string;
  link: string;
}
const status_list = ref<any>([]); //暂时存储状态
/************************************  群发消息  ************************************/
const massTexting = () => {
  mask.value = true;
  messagesShow.value = true;
};

// 推送消息数据
const sendMes = ref({
  templateId: '',
  type: '',
  content: '',
  title: '',
});
/**
 * 根据推送类型获取模板
 */
const template_options = ref<any>([]);
const typeChange = async () => {
  const a = await RequesttemplateIds(sendMes.value.type);
  template_options.value = a.resultObj;
};
const typeChange1 = async (value: number) => {
  template_options.value.forEach((item: any) => {
    if (item.id == value) {
      sendMes.value.content = item.content;
    }
  });
};
/**
 * 群发消息确认
 */

let loading = ref(false); //设置记录时间，用于防抖
let timer = ref(null); //设置记录时间，用于防抖
const plateformSure = async (formEl: any) => {
  if (!formEl) return;
  await formEl.validate(async (valid: any, fields: any) => {
    if (valid) {
      if (timer != null) {
        clearTimeout(timer);
      }
      timer = setTimeout(async () => {
        loading.value = true;
        const a = await SendMesToUser({
          ids: delIds.value,
          templateId: sendMes.value.templateId,
          content: sendMes.value.content,
          type: sendMes.value.type,
          title: sendMes.value.title,
        });
        if (a.msg == '操作成功！') {
          messagesShow.value = false;
          mask.value = false;
          sendMes.value = {
            templateId: '',
            type: '',
            content: '',
            title: '',
          };
          ElMessage.success('发送成功');
          loading.value = false;
        } else {
          ElMessage.error('发送失败，请重试！');
          loading.value = false;
        }
      }, 500);
    }
  });
};
/**
 * 推送类型
 */
const type_options = [
  {
    value: 0,
    label: '支付通知',
  },
  {
    value: 1,
    label: '物流通知',
  },
  {
    value: 2,
    label: '平台公告',
  },
  {
    value: 3,
    label: '优惠促销',
  },
];
/************************************  弹出框关闭  ************************************/
const CancelPopUpBox = () => {
  mask.value = false;
  plateformShow.value = false;
  messagesShow.value = false;
  GoodsformDate.value = {
    type: '',
    link: '',
  };
};

// 搜索参数
const searchValue = ref({
  account: '',
  userName: '',
  level: '',
  status: '',
  startTime: '',
  endTime: '',
  page: 1,
  rows: 10,
});
/**
 * 时间范围单选按钮
 */
const radioSelect = () => {
  searchValue.value.startTime = '';
  searchValue.value.endTime = '';
  var now = new Date();
  now.setHours(0);
  now.setMinutes(0);
  now.setSeconds(0);
  var now1 = new Date();
  now1.setHours(23);
  now1.setMinutes(59);
  now1.setSeconds(59);
  if (radio.value === '1') {
    searchValue.value.startTime = moment(now).format('YYYY-MM-DD HH:mm:ss');
    searchValue.value.endTime = moment(now1).format('YYYY-MM-DD HH:mm:ss');
  } else if (radio.value === '2') {
    searchValue.value.startTime = moment(now).subtract(7, 'days').format('YYYY-MM-DD HH:mm:ss');
    searchValue.value.endTime = moment(now1).format('YYYY-MM-DD HH:mm:ss');
  } else if (radio.value === '3') {
    searchValue.value.startTime = moment(now).subtract(30, 'days').format('YYYY-MM-DD HH:mm:ss');
    searchValue.value.endTime = moment(now1).format('YYYY-MM-DD HH:mm:ss');
  } else {
    searchValue.value.startTime = moment(now).subtract(3, 'months').format('YYYY-MM-DD HH:mm:ss');
    searchValue.value.endTime = moment(now1).format('YYYY-MM-DD HH:mm:ss');
  }
  search();
};
// 开始时间
const startTime = () => {
  radio.value = '0';
  searchValue.value.startTime.setHours(0);
  searchValue.value.startTime.setMinutes(0);
  searchValue.value.startTime.setSeconds(0);
  searchValue.value.startTime = moment(searchValue.value.startTime).format('yyyy-MM-DD HH:mm:ss');
  search();
};
// 结束时间
const endTime = () => {
  radio.value = '0';
  searchValue.value.endTime.setHours(23);
  searchValue.value.endTime.setMinutes(59);
  searchValue.value.endTime.setSeconds(59);
  searchValue.value.endTime = moment(searchValue.value.endTime).format('yyyy-MM-DD HH:mm:ss');
  search();
};
/**
 * 搜索
 */
const search = async () => {
  status_list.value = searchValue.value.status;
  // 判断开始时间不能早于当前时间
  if (moment(searchValue.value.startTime).diff(moment().format('YYYY-MM-DD HH:mm:ss')) >= 0) {
    ElMessage.error('开始时间不能晚于当前日期');
    searchValue.value.startTime = '';
  } else {
    // 判断是否两个时间都填写了
    if (searchValue.value.startTime !== '' && searchValue.value.endTime !== '') {
      // 判断开始时间不能晚于结束时间
      if (moment(searchValue.value.startTime).diff(moment(searchValue.value.endTime)) <= 0) {
        searchValue.value.page = 1;
        requestPlatformUser();
      } else {
        ElMessage.error('结束时间不能早于开始时间');
        searchValue.value.endTime = '';
      }
    } else {
      searchValue.value.page = 1;
      requestPlatformUser();
    }
  }
};
/**
 * 分页
 */
const pageChange = async (val: number) => {
  requestPlatformUser();
};
// 挂载
onMounted(() => {
  requestPlatformUser();
  handleResize();
  window.addEventListener('resize', handleResize);
});
const searchBox = ref();
const tablelistHeight = ref();
const handleResize = () => {
  const searchBoxHeight = searchBox.value.clientHeight;
  tablelistHeight.value = 110 + searchBoxHeight + 'px';
  console.log('Search Box height11111111111111111111111111111:', searchBoxHeight);
};
/**
 * 获取用户列表
 */
const requestPlatformUser = async () => {
  const a = await RequestPlatformUser(searchValue.value);
  total.value = a.resultObj.count;
  tableData.value = a.resultObj.users;
  console.log('获取成功', a);
};
/**
 * 状态选择器
 */
const status_options = [
  {
    value: 1,
    label: '活跃',
  },
  {
    value: 2,
    label: '注销',
  },
  {
    value: 3,
    label: '不活跃',
  },
];
/**
 * 等级选择器
 */
const rate_options = [
  {
    value: 0,
    label: '青铜',
  },
  {
    value: 1,
    label: '白银',
  },
  {
    value: 2,
    label: '黄金',
  },
  {
    value: 3,
    label: '钻石',
  },
];
/**
 * 点击重置
 */
const reset = () => {
  requestPlatformUser();
  searchValue.value = {
    account: '',
    userName: '',
    level: '',
    status: '',
    startTime: '',
    endTime: '',
    page: 1,
    rows: 15,
  };
  radio.value = '0';
  status_list.value = '';
};

const delIds = ref<any>([]);
/**
 * 表格复选框选中事件
 */
const handleSelectionChange = (selection: any) => {
  delIds.value = [];
  order.value = [];
  for (let x = 0; x < tableData.value.length; x++) {
    tableData.value[x].selection = false;
  }
  for (let i = 0; i < selection.length; i++) {
    selection[i].selection = true;
    order.value.push(selection[i]);
    delIds.value.push(selection[i].id);
  }
};

/**
 * 查看用户
 */
const user = ref();
const orderInfo = ref([]);
const preferentialInfo = ref([]);
const lookUser = async (item: any) => {
  const a = await LookUserMes(item.id);
  orderShow.value = true;
  user.value = a.resultObj.user;
  orderInfo.value = a.resultObj.orderInfo;
  preferentialInfo.value[0] = a.resultObj.preferentialInfo;
  console.log(25854185484545, a);
};
/**
 * 冻结用户
 */
const blockedUser = (item: any) => {
  console.log(123);
};
/**
 * 解冻用户
 */
const unfreezeUser = (item: any) => {
  console.log(123);
};
const essential = ref(true);
const detailed = ref(false);
// 点击切换导航栏
const navLi = (value: number) => {
  if (value === 0) {
    essential.value = true;
    detailed.value = false;
    const x = document.getElementById('nav_li1');
    const y = document.getElementById('nav_li2');
    x ? x.classList.add('current') : '';
    y ? y.classList.remove('current') : '';
  } else {
    essential.value = false;
    detailed.value = true;
    const x = document.getElementById('nav_li2');
    const y = document.getElementById('nav_li1');
    x ? x.classList.add('current') : '';
    y ? y.classList.remove('current') : '';
  }
};
/**
 * 遮罩层数据
 */
const maskBtn1 = () => {
  mask.value = false;
  plateformShow.value = false;
  messagesShow.value = false;
  status_list.value = '';
};
</script>
<style lang="scss" scoped>
@import '@/assets/css/plateform/Article/Content.css';
@import '@/assets/css/plateform/Shop/GoodsManage.css';

.main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.tooltip-base-box {
  width: 600px;
}

.tooltip-base-box .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tooltip-base-box .center {
  justify-content: center;
}

.tooltip-base-box .box-item {
  width: 110px;
  margin-top: 10px;
}

.table {
  //height: calc(100% - v-bind(tablelistHeight)) !important;
}

::v-deep .el-table--fit {
  //height: calc(100% - 130px) !important;
}

.table :deep(.el-table__cell) {
  text-align: center;
}

.nav1 {
  display: flex;
  height: 30px;
  align-items: center;
  margin-top: 20px;
  border-bottom: 0;

  .nav_li {
    width: 50%;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 14px;
  }

  .current {
    border-bottom: 2px solid #5697f9;
  }
}

.order {
  .title {
    width: 100%;
    display: flex;
    align-items: center;

    .head_img {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background: #e2ebfa;
    }

    .user_mes_top {
      display: flex;
      flex: 1;
      margin-left: 20px;
      flex-wrap: wrap;
      font-size: 14px;
      color: #9e9e9e;

      .p_text {
        width: 100%;
        line-height: 22px;
        display: flex;
        align-items: center;
      }

      .user_top_name {
        font-size: 18px;
        font-weight: bold;
        color: #333;
        line-height: 32px;
      }
    }

    .title_right {
      width: 100px;
      height: 30px;
      line-height: 30px;
      color: #409eff;
      border: 1px solid #409eff;
      border-radius: 5px;
      font-size: 15px;
      text-align: center;

      .el-icon {
        margin-right: 5px;
      }
    }
  }

  .essential_information {
    margin-top: 10px;

    .center {
      width: 100%;
      display: flex;
      flex-wrap: wrap;

      .list {
        width: 50%;
        height: 60px;
        line-height: 60px;
        font-size: 14px;

        .img_b {
          width: 16px;
          height: 16px;
          margin-right: 5px;
        }

        .left {
          width: 40%;
          color: #9e9e9e;
          display: inline-block;

          .el-icon {
            margin-right: 5px;
          }
        }
      }
    }

    .titlt_title {
      width: 100%;
      height: 60px;
      display: flex;
      align-items: center;
      font-size: 16px;

      .box {
        width: 3px;
        height: 18px;
        background: #409eff;
        margin-right: 10px;
      }
    }
  }
}

.table {
  overflow: hidden;
  padding: 0 10px;

  .table_function {
    margin-top: 20px;
  }
}

.el-form-item :deep(.el-input-group__prepend) {
  width: 10px;
  background-color: #116cf8;
  color: #fff;
}

.el-form-item :deep(.el-upload--picture-card) {
  height: 100px;
  width: 100px;
  opacity: 0;
}

.btn {
  width: 150px;
  position: absolute;
  right: 20px;
  bottom: 40px;
}

// 推送消息
.plateform,
.messages {
  width: 600px;
  height: 500px;
  position: absolute;
  position: fixed;
  top: 50%;
  left: 50%;
  margin-left: -300px;
  margin-top: -250px;
  z-index: 99;
  background: #fff;
}

:deep(.el-input__wrapper) {
  width: 150px;
}

:deep(.el-drawer.rtl) {
  background: #fff;
  width: 750px !important;
}

:deep(.el-overlay) {
  z-index: 40 !important;
  padding: static;
}

:deep(.is-process) {
  color: #409eff;
}

:deep(.is-process .el-step__icon.is-text) {
  border: 2px solid #409eff;
  background: #409eff;
  color: #fff;
}

:deep(.is-finish .el-step__line) {
  background: #409eff;
}

.el-table .warning-row {
  background: #44a2ff !important;
}

:deep(.el-select) {
  width: 100%;
}
</style>
